<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="/static/css/easyui.css">
	<link rel="stylesheet" type="text/css" href="/static/css/icon.css">
	<link rel="stylesheet" type="text/css" href="/static/css/demo.css">
	<script type="text/javascript" src="/static/js/jquery.min.js"></script>
	<script type="text/javascript" src="/static/js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<div data-options="region:'west',split:true" title="West" style="width:220px;">
			<div class="easyui-accordion" data-options="fit:true,border:false">
				<div title="Title1" style="padding:10px;">
					<a href="#" onclick="addTab('baidu','https://www.baidu.com')">百度一下</a>
					<a href="#" onclick="addTab('product','list.html')">商品列表</a>
				</div>
				<div title="Title2" data-options="selected:true" >
					content2
				</div>
				<div title="Title3" style="padding:10px">
					content3
				</div>
			</div>
		</div>
	
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'">
		<div class="easyui-tabs" style="width:100%;height:100%" id="tab">
			<!--<div title="百度" data-options="closable:true,fit:true,plain:true">
				<iframe src="https://www.baidu.com" frameborder="0" scrolling="auto" style=" width:100%; height:100%"></iframe>
			</div>
			<div title="淘宝" data-options="closable:true,fit:true,plain:true">
				<iframe src="https://www.baidu.com" frameborder="0" scrolling="auto" style=" width:100%; height:100%"></iframe>
			</div>-->
			
		</div>
		
	</div>
	</div>
	<script type="text/javascript">
		function addTab(title,url){
			
			if($("#tab").tabs("exists",title)){//判断tab中是否有叫这个title的tab
				$("#tab").tabs("select",title);//存在则设置该tab为选中
			}else{
			var value='<iframe src="'+url+'" frameborder="0" scrolling="auto" style=" width:100%; height:100%"></iframe></div>';
			$("#tab").tabs("add",{content:value ,closable:true})
			//{}中的是参数，content是tab的内容，title是tab的标题，closable设为true代表可以关闭
			}
		}
	</script>
</body>
</html>